<template>
  <div>
    <van-nav-bar title="订单详情" left-text="返回" @click-left="onClickLeft" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <el-card class="box-card">
      <van-row>
        <van-contact-card type="edit" :name="currentContact.name" :tel="currentContact.tel" />
      </van-row>
    </el-card>
    <van-card num="1" :price="indexInfo.totalPrice" :desc="indexInfo.mark" :title="indexInfo.goodsName"
      :thumb="baseUrl+indexInfo.image">
    </van-card>
    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
    <!-- 优惠券列表 -->
    <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
      <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
        @change="onChange" @exchange="onExchange" />
    </van-popup>
    <div style="margin:18px">
      <el-row>
        <el-col :span="12">
          <span style="font-size:14px">商品价格</span>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <span style="color:rgb(182, 182, 182);font-size:14px">￥{{indexInfo.totalPrice}}</span>
        </el-col>
      </el-row>
      <el-row style="margin-top:40px">
        <el-col :span="12">
          <span style="font-size:14px">优惠</span>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <span style="color:rgb(182, 182, 182);font-size:14px">￥{{indexInfo.totalPrice}}</span>
        </el-col>
      </el-row>
      <el-row style="margin-top:40px">
        <el-col :span="12">
          <span style="font-size:14px">运费</span>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <span style="color:rgb(182, 182, 182);font-size:14px"
            v-if="goods.postage!=null||undefined">￥{{indexInfo}}</span>
          <span style="color:rgb(182, 182, 182);font-size:14px" v-else>包邮</span>
        </el-col>
      </el-row>
      <el-row style="margin-top:40px">
        <el-col :span="12">
          <span style="font-size:14px;line-height:40px">备注</span>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <van-field v-model="del" placeholder="请输入备注" />
        </el-col>
      </el-row>
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="余额支付" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="微信支付" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" disabled />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <van-submit-bar :price="goods.goodsPrice*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>
<script>
import { Toast } from 'vant';
import Vue from 'vue';
import { CouponCell, CouponList } from 'vant';
Vue.use(CouponCell);
Vue.use(CouponList);
export default {
  data () {
    return {
      currentContact: {
        name: '张三',
        tel: '13000000000',
      },
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      indexInfo: []
    }
  },
  created: function () {
    this.indexInfo = this.$route.params.index
    console.log(this.indexInfo)
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>